<template>
	<div>
		<el-row :span="24" style="margin:26px 0 0;">
			<div style="display: flex;justify-content: flex-start;">
				<p @click="navToOperationHome()" class="tabHeader">首页</p>
				<p @click="navTomerchant()" class="tabHeader">商家</p>
				<p class="tabHeader" style="color: #409eff;border-bottom: 0;">个人中心</p>
				<p @click="navToCkBanner()" class="tabHeader">创客</p>
				<p @click="navToStartBanner()" class="tabHeader">启动广告</p>
				<p @click="navTocity()" class="tabHeader">城主页面</p>
			</div>
			<el-row style="margin-top: 20px;">
				<!-- <el-button @click="edit('addSJ')" class="btnPad " type="primary">新建</el-button> -->
				<el-button v-if="isActive1==true" class="btnPad " type="primary" @click="fetchGoods(1);dialogTableVisible=true">增加
				</el-button>
				<el-button @click="getBannerList()" :class="[isActive==true?'btnChoose':'btnPad'] " plain>banner</el-button>
				<el-button @click="getProductList()" :class="[isActive1==true?'btnChoose':'btnPad'] " plain>商品推荐</el-button>
			</el-row>
		</el-row>
		<div v-if="isActive==true" style="margin-top: 20px;">
			<el-table :data="position_Info.persons" v-loading="table_loading" element-table_loading-text="加载中" stripe style="width: 100%">
				<el-table-column label="序号" type="index" width="70">
				</el-table-column>
				<el-table-column width="250" prop="sysRemark" label="名称">
				</el-table-column>
				<el-table-column min-width="500" label="图片展示">
					<template scope="scope">
						<img style="width: 80px;margin: 5px;" class="banner" :src="scope.row.sysValue">
					</template>
				</el-table-column>
				<el-table-column min-width="sysValue" label="跳转类型">
					<template scope="scope">
						<span>{{scope.row.sysLink }}</span>
					</template>
				</el-table-column>
				<!-- 	<el-table-column width="100" label="发布状态">
					<template scope="scope">
						<span v-if="scope.row.operationState == 'Y'">已发布</span>
						<span v-else>未发布</span>
					</template>
				</el-table-column> -->
				<!-- 运营位 -->
				<el-table-column label="操作" width="250">
					<template scope="scope">
						<el-button size="small" type="primary" @click="edit2(scope.row)">编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div v-show="isActive1==true" style="margin-top: 20px;">
			<el-table :data="pageInfo2.rows" style="margin-bottom: 20px;">
				<el-table-column label="排序值" width="110">
					<template scope="scope">
						<el-button @click="setOldProbability(scope.row,scope.row.sort_value);showDilog(scope.row)">{{ scope.row.sort_value }}</el-button>
					</template>
				</el-table-column>
				<el-table-column width="300" label="商品名称">
					<template scope="scope">
						<div style="display: inline-block;">
							<img class="banner" :src="scope.row.goodCover" style="width:120px;">
						</div>
						<div style="display: inline-block;width: 120px;vertical-align: middle;padding: 10px;">{{scope.row.goodName}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="goodType" label="分类">
					<template scope="scope">
						<span v-if="scope.row.goodType==1">商品 </span>
						<span v-else-if="scope.row.goodType==2">酒店</span>
						<span v-else>服务</span>
					</template>
				</el-table-column>
				<el-table-column prop="good_Price" label="起售价(元)">
					<template scope="scope">
						<span>{{ scope.row.goodPrice }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template scope="scope">
						<el-button @click.native.prevent="deleteRow(scope.$index,scope.row.goodId)" type="danger" size="small">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="paginate">
				<el-pagination @current-change="handleCurrentChange2" :current-page="pageInfo2.pageNum" :page-size="pageInfo2.pageSize"
				 layout="total, prev, pager, next, jumper" :total="pageInfo2.count">
				</el-pagination>
			</div>
			</el-row>
			<div style="margin-left: 30px;margin-bottom: 20px;">
				<el-button type="primary" @click="submit()" :loading="loading">保 存 商 品
				</el-button>
			</div>
			<!--选择商品-->
			<el-dialog title="选择商品" v-model="dialogTableVisible" size="large">
				<el-row>
					<el-col :span="24">
						<el-form :inline="true" class="demo-form-inline" label-width="80px">
							<el-form-item label="商品名称">
								<el-col :span="18">
									<el-input v-model="formInline.goodName"></el-input>
								</el-col>
							</el-form-item>
							<el-button type="primary" @click="fetchGoods(1)">查询</el-button>
						</el-form>
					</el-col>
				</el-row>
				<el-table :data="gridData">
					<el-table-column width="215" label="商品">
						<template scope="scope">
							<div style="display: inline-block;">
								<img class="banner" :src="scope.row.goodCover" style="width:55px;">
							</div>
							<div style="display: inline-block;width: 120px;vertical-align: middle;padding: 10px;">{{scope.row.goodName}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="DIS_PRICE" label="分类">
						<template scope="scope">
							<span>{{ scope.row.goodOneCateName }} - {{ scope.row.goodTwoCateName }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="good_Price" sortable='custom' label="起售价（元）">
						<template scope="scope">
							<span>{{ scope.row.goodPrice }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="T1.good_Discount_Price" label="优惠价（元）">
						<template scope="scope">
							<span v-if="scope.row.goodIsDiscount==1">{{ scope.row.goodDiscountPrice }}</span>
							<span v-else>未启用</span>
						</template>
					</el-table-column>
					<el-table-column prop="good_Ratio" label="补贴比例">
						<template scope="scope">
							<span>{{ scope.row.goodRatio*100 }}%</span>
						</template>
					</el-table-column>
					<el-table-column prop="sales" label="销量">
					</el-table-column>
					<el-table-column prop="stock" label="库存">
					</el-table-column>
					<el-table-column prop="cre_Time" label="上架时间">
						<template scope="scope">
							<span>{{scope.row.creTime}}</span>
						</template>
					</el-table-column>
					<el-table-column label="选择" width="150">
						<template scope="scope">
							<el-checkbox-group v-model="checked" :max="100" @change="handleCheckedCitiesChange">
								<el-checkbox :label="scope.row">选择</el-checkbox>
							</el-checkbox-group>
						</template>
					</el-table-column>
				</el-table>
				<div class="paginate" style="float: left;">
					<el-pagination @current-change="handleCurrentChange_list" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
					 layout="total, prev, pager, next, jumper" :total="pageInfo.count">
					</el-pagination>
				</div>
				<div style="float: right;margin-top:19px;margin-right: 20px;">
					<el-checkbox v-model="checkAll" @change="handleCheckAllChange" style="margin-right: 40px;" :indeterminate="isIndeterminate">全选</el-checkbox>
					<el-button type="primary" @click="onSubmit()">确定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				isActive: true,
				isActive1: false,
				table_loading: false,
				formInline: {
					goodName: '',
					goodOneCate: '',
					goodTwoCate: '',
					goodState: 2,
					storeId: '',
					pageNum: 1,
					pageSize: 5,
					sort: 'T1.CRE_TIME',
					desc: 'DESC',
					goodIsDiscount: ''
				},
				form: {
					goodsCodeList: [],
					operationCode: 6
				},
				pageInfo: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					vos: []
				},
				desc: 'DESC',
				sorts: 'BANNER_SORT + 0',
				bannerType: [{
					text: '单商品',
					value: 'D'
				}, {
					text: '多商品',
					value: 'DD'
				}, {
					text: '链接',
					value: 'L'
				}, {
					text: '商家',
					value: 'DP'
				}, {
					text: '文章',
					value: 'T'
				}, {
					text: '不跳转',
					value: 'B'
				}, {
					text: '商家入驻',
					value: 'S'
				}, ],
				formInline1: {
					storeName: '',
					actStat: 4,
					storeId: '',
					pageNum: 1,
					pageSize: 5,
					sort: 'CRT_TIME',
					desc: 'DESC',

				},
				pageInfo1: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					vos: []
				},
				pageInfo2: {
					pageNum: 1,
					pageSize: 5,
					count: 1,
					rows: []
				},
				storeGoodDtos: [],
				gridData: [],
				checked: [],
				checkAll: false,
				isIndeterminate: true,
				arr: [],
				loading: false,
				dialogTableVisible: false,
				dialogTableVisible2: false,
				f: {},
				// 个人中心banner
				position_Info: [],
			}
		},

		activated() {
			this.getBannerList();
		},
		mounted() {

		},
		methods: {
			getBannerList() {
				let vm = this
				let type = 'me'
				vm.isActive = true
				vm.isActive1 = false
				vm.dataApi.ajax('newSinglePerson', {
					type: type
				}, res => {
					vm.table_loading = false;
					if (res.responseType === 'S') {
						var position_Info = res
						var arr = position_Info.persons
						vm.position_Info = position_Info

					}
				});
			},
			getProductList() {
				let vm = this
				this.dataApi.ajax('operationSelect', {
					operationCode: 6
				}, res => {
					if (res.responseType === 'S') {
						this.pageInfo2 = {
							pageNum: 1,
							pageSize: 5,
							count: 1,
							rows: []
						}
						for (var i = res.dtos.length - 1; i >= 0; i--) {
							res.dtos[i].sort_value = i + 1
							res.dtos[i].index = i
							res.dtos[i].OldProbability = i + 1
						}

						let arr = generateArr(res.dtos)
						this.storeGoodDtos = res.dtos
						this.pageInfo2.count = res.dtos.length
						this.pageInfo2.rows = arr.splice(0, 5)
						vm.isActive = false
						vm.isActive1 = true
					}
				});
			},
			navToOperationHome() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 前往运营活动首页
				 * @return 
				 * @createTime: 2020-8-6 15:26:02
				 */
				this.$router.push('/official/activityOperate')
			},
			navToCkBanner() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 前往创客
				 * @return 
				 * @createTime: 2020-8-7 14:43:16
				 */
				this.$router.push('/official/ck_bannerList')
			},
			navToStartBanner() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 前往开机广告
				 * @return 
				 * @createTime: 2020-8-6 18:42:09
				 */
				this.$router.push('/official/start_bannerList')
			},
			navTocity() {
				this.$router.push('/official/city_master')
			},
			navTomerchant() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 前往运营活动商家
				 * @return 
				 * @createTime: 2020-8-6 15:26:02
				 */
				this.$router.push('/official/merchantOperation')
			},
			edit2(data) {
				this.$router.push({
					path: "/official/edit_activityBanner/",
					query: {
						data: data
					}
				})
				// this.$router.push('/official/edit_activityBanner/' + data)
			},
			handleCurrentChange2(val) {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 商品分页
				 * @return 
				 * @createTime: 2020-8-7 13:20:36
				 */
				this.pageInfo2.pageNum = val
				// console.log(arr.splice(5*(val-1),(5*(val-1)+5)))
				var arr2 = []
				var arr = generateArr(this.storeGoodDtos)
				arr2 = arr.slice(5 * (val - 1), (5 * (val - 1) + 5))
				this.pageInfo2.rows = arr2
			},
			deleteRow(index, id) {
				this.pageInfo2.rows.splice(index, 1);
				// this.storeGoodDtos.splice(index, 1);
				for (var i = this.storeGoodDtos.length - 1; i >= 0; i--) {
					if (this.storeGoodDtos[i].goodId.indexOf(id) !== -1) {
						this.storeGoodDtos.splice([i], 1)
					}
				}
				for (var i = this.storeGoodDtos.length - 1; i >= 0; i--) {
					this.storeGoodDtos[i].sort_value = i + 1
					this.storeGoodDtos[i].index = i
					this.storeGoodDtos[i].OldProbability = i + 1
				}
				this.handleCurrentChange2(this.pageInfo2.pageNum)
				this.pageInfo2.count = this.storeGoodDtos.length
			},
			submit() {
				if (this.form.goodsCodeList.length < 1) {
					this.form.goodsCodeList = ''
				}
				let obj = generateObj(this.form)
				if (this.storeGoodDtos.length == 0) {
					this.$message({
						type: 'warning',
						message: '请选择至少一个商品!'
					});
					return;
				}

				var arr = []
				for (var i = 0; i < this.storeGoodDtos.length; i++) {
					arr.push({
						goodId: this.storeGoodDtos[i].goodId,
						goodType: this.storeGoodDtos[i].goodType ? this.storeGoodDtos[i].goodType.toString() : '1'
					})
				}
				obj.dtos = arr

				this.loading = true
				this.dataApi.ajax('operationEdit', obj, res => {
					if (res.responseType === 'S') {
						this.showMsg('保存成功')
						this.loading = false;
						this.getProductList();

					}
				});

			},
			fetchGoods(page = 1) {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 获取商品弹框列表
				 * @return 
				 * @createTime: 2020-8-7 13:27:53
				 */
				this.checked = []
				this.pageInfo.pageNum = page;
				this.formInline.pageNum = page;
				this.dataApi.ajax('selectPageStoreGood', this.formInline, res => {
					if (res.responseType === 'S') {
						this.pageInfo = res
						this.gridData = res.dtos
						this.arr = []
						this.checked = []
						this.inisIndeterminate = true
						for (var i = this.gridData.length - 1; i >= 0; i--) {
							this.arr.push(this.gridData[i])
						}

						if (this.checked.length == this.arr.length) {
							this.checkAll = true
						} else {
							this.checkAll = false;
						}

					}
				});

			},
			handleCurrentChange_list(val) {
				this.fetchGoods(val)
				this.checkAll = false
			},
			handleCheckAllChange(event) {

				if (event.target.checked == false) {
					for (var i = this.arr.length - 1; i >= 0; i--) {
						for (var j = this.checked.length - 1; j >= 0; j--) {
							if (this.arr.indexOf(this.checked[j]) !== -1) {
								this.checked.splice(j, 1)
							}
						}
					}

				} else {
					this.isIndeterminate = false;
					for (var i = this.gridData.length - 1; i >= 0; i--) {
						if (this.checked.indexOf(this.arr[i]) === -1) {
							this.checked.push(this.arr[i])
						}
					}
				}


			},
			handleCheckedCitiesChange(value) {

				let arr = []
				for (var i = this.arr.length - 1; i >= 0; i--) {
					for (var j = this.checked.length - 1; j >= 0; j--) {
						if (arr.indexOf(this.checked[j]) === -1 && this.arr[i] === this.checked[j]) {
							arr.push(this.checked[j])
						}
					}
				}


				let checkedCount = arr.length;
				this.checkAll = checkedCount === this.arr.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.arr.length;
			},
			onSubmit(type) {

				// this.pageInfo2.rows=this.checked
				for (var key in this.storeGoodDtos) {
					for (var i in this.checked) {
						if (type == 1) {
							if (this.storeGoodDtos[key].goodId.indexOf(this.checked[i].goodId) !== -1) {
								this.checked.splice([i], 1)
							}
						} else if (type == 2) {
							if (this.storeGoodDtos[key].goodId.indexOf(this.checked[i].roomId) !== -1) {
								this.checked.splice([i], 1)
							}
						} else if (type == 3) {
							if (this.storeGoodDtos[key].goodId.indexOf(this.checked[i].voucherId) !== -1) {
								this.checked.splice([i], 1)
							}
						}

					}
				}
				if (this.checked.length <= 0) {
					return false;
				}
				this.storeGoodDtos = this.storeGoodDtos.concat(this.checked);
				// -----------------------------------

				for (var i = this.storeGoodDtos.length - 1; i >= 0; i--) {
					this.storeGoodDtos[i].sort_value = i + 1;
					this.storeGoodDtos[i].index = i;
					this.storeGoodDtos[i].OldProbability = i + 1;

					if (!this.storeGoodDtos[i].goodId && type == 2) {
						this.storeGoodDtos[i]['goodId'] = this.storeGoodDtos[i].roomId
						this.storeGoodDtos[i]['goodName'] = this.storeGoodDtos[i].roomName
						this.storeGoodDtos[i]['goodCover'] = this.storeGoodDtos[i].roomImg
						this.storeGoodDtos[i]['goodPrice'] = this.storeGoodDtos[i].sttPrice
						this.storeGoodDtos[i]['goodType'] = type;


					}
					if (!this.storeGoodDtos[i].goodId && type == 3) {
						this.storeGoodDtos[i]['goodId'] = this.storeGoodDtos[i].voucherId;
						this.storeGoodDtos[i]['goodName'] = this.storeGoodDtos[i].voucherName;
						this.storeGoodDtos[i]['goodCover'] = this.storeGoodDtos[i].voucherCover;
						this.storeGoodDtos[i]['goodPrice'] = this.storeGoodDtos[i].voucherAmt;
						this.storeGoodDtos[i]['goodType'] = type;
					}

				}
				var arr = generateArr(this.storeGoodDtos)
				this.pageInfo2.count = this.storeGoodDtos.length

				this.pageInfo2.rows = arr.splice(0, 5)
				this.dialogTableVisible = false;
				this.dialogTableVisible3 = false;
				this.dialogTableVisible4 = false;

			},
		}
	}
</script>


<style>
	.tabHeader {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
		border-right: 0;
		cursor: pointer;
	}

	.tabHeader:last-child {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
	}

	.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		border-bottom-color: #FFFFFF;
		background-color: #FFFFFF;
		color: #20a0ff;
	}

	.btnPad {
		width: 120px;
		text-align: center;
	}

	.btnChoose {
		width: 120px;
		text-align: center;
		border: 1px solid #20a0ff;
		color: #20a0ff;
	}
</style>
